<template>
  <div class="dashboard">
    <div class="dashboard-content">
      <CameraCaptures class="camera-section" :deviceSerial="deviceSerial" :isOnline="true" />
      <div class="data-section">
        <SoilDataOverview />
        <SensorCharts />
      </div>
    </div>
  </div>
</template>

<script setup>
import CameraCaptures from '../components/CameraCaptures.vue'
import SoilDataOverview from '../components/SoilDataOverview.vue'
import SensorCharts from '../components/SensorCharts.vue'

const deviceSerial = 'AB9831171'
</script>

<style scoped>
.dashboard {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 20px;
}

.dashboard-content {
  flex: 1;
  display: flex;
  gap: 10px;
}

.camera-section {
  flex: 1.8;
  min-width: 500px;
  height: 100%;
}

.data-section {
  flex: 2;
  min-width: 600px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  height: 100%;
}

/* 响应式布局 */
@media screen and (max-width: 1366px) {
  .dashboard-content {
    gap: 8px;
  }
  
  .camera-section {
    min-width: 450px;
  }
  
  .data-section {
    min-width: 550px;
  }
}
</style> 